<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Floater</title>


<link href="Floater_files/listexpander.htm" rel="stylesheet" type="text/css" media="screen">

<style>

body{
	margin:0;
	padding:0;
	background:#f1f1f1;
	font:70% Arial, Helvetica, sans-serif; 
	color:#555;
	line-height:150%;
	text-align:left;
}
a{
	text-decoration:none;
	color:#057fac;
}
a:hover{
	text-decoration:none;
	color:#999;
}
h1{
	font-size:180%;
	margin:0 20px;
	font-weight:normal;
	line-height:60px;		
}
h2{
	font-size:160%;
	font-weight:normal;
	height:28px;
	line-height:28px;
	margin:0;
}
#container{
	margin:0 auto;
	width:500px;
	background:#fff;
	padding-bottom:20px;
}
#content{margin:0 20px;}
#sig{	
	margin:0 auto;
	width:500px;
	padding:1em 0;
}
img{border:none;}
/* basic floater */

.floater{
	margin:0;
	float:right;
	margin-top:-28px;
	line-height:28px;
}

#example1, #example2, #example3, #example4, #example5{
	margin:2em 0;
}

/* example 1 */

#example1 h2{
	border-bottom:1px solid #e1e1e1;
	padding-bottom:5px;
}
#example1 .floater a{
	padding-left:18px;
	text-transform:uppercase;
	font-size:90%;
	background:url(link.gif) no-repeat 0 50%;
}

/* example 2 */

#example2 h2{
	background:url(e2_back.gif) repeat-x;
	text-indent:12px;
	color:#fff;
	font-size:110%;
	text-transform:uppercase;
}

/* example 3 */

#example3 h2{
	background:url(e3_back.gif) repeat-x;
	text-indent:12px;
	color:#fff;
	font-size:110%;
	text-transform:uppercase;
}
#example3 .floater{
	width:27px;
	height:47px;
	line-height:22px;
	background:url(e3f_back.gif) no-repeat 0 0;
	margin-right:12px;
	display:inline;
	margin-top:-30px;
	text-align:center;
	color:#fff;
}
#example3 .floater span{display:none;}


/* example 4 */

#example4 h2{
	color:#057fac;
	font-size:180%;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#example4 .floater{
	margin:0;
	margin-top:-24px;
	padding:0;
	position:relative;
	width:88px;
}
#example4 .floater li{
	width:43px;
	padding-top:2px;
	float:left;
	list-style:none;
}
#example4 .floater li a{
	width:43px;
	height:14px;
	float:left;
	text-indent:-8000px;
	overflow:hidden;
}
#example4 .floater li a.prev{background:url(prev.gif) no-repeat 0 0;}
#example4 .floater li a.next{background:url(next.gif) no-repeat 0 0;margin-left:2px;}

/* example 5 */

#example5 h2{
	font-size:250%;
	letter-spacing:-.05em;
	color:#ffa200;
}
#example5 .floater img{
	margin-left:5px;
}



</style></head><body>

<div id="container">
	
	<h1>Floater</h1>

	<div id="content">
	
		<div id="example1">
		
			<h2>Blog post</h2>
			<p class="floater"><a href="#">more...</a></p>	
			<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt
turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum
purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae,
sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta,
lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor
mi vel odio</p>
		
		</div>
		
		<div id="example2">
		
			<h2>My site title</h2>
			<p class="floater"><a href="#" title="subscribe to my feed"><img src="Floater_files/feedico.gif" alt="feed icon"></a></p>	
			<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt
turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum
purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae,
sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta,
lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor
mi vel odio</p>	
		
		</div>
		
		<div id="example3">
		
			<h2>Blog post</h2>
			<p class="floater">8 <span>votes</span></p>	
			<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt
turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum
purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae,
sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta,
lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor
mi vel odio</p>	
		
		</div>		
		
		<div id="example4">
		
			<h2>Blog post</h2>
			<ul class="floater">
				<li><a href="#" class="prev">prev</a></li>
				<li><a href="#" class="next">next</a></li>
			</ul>	
			<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt
turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum
purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae,
sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta,
lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor
mi vel odio</p>	
		
		</div>				
	
		<div id="example5">
		
			<h2>Blog post</h2>
			<p class="floater">
				<a href="#"><img src="Floater_files/diggico.gif" alt=""></a> 
				<a href="#"><img src="Floater_files/deliciousico.gif" alt=""></a> 
				<a href="#"><img src="Floater_files/stumbleuponico.gif" alt=""></a>
			</p>	
			<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt
turpis sed nunc. Pellentesque porttitor sagittis nisl. Etiam dictum
purus vitae lorem. Ut ipsum orci, feugiat sit amet, luctus vitae,
sodales quis, nibh. Sed vel mi. Ut vehicula nisi quis pede. Duis porta,
lacus a pellentesque sodales, ligula sem tempor magna, ac mattis tortor
mi vel odio</p>	
		
		</div>			
	
	</div>
	
</div>
<p id="sig">Floater is brought to you by <a href="http://www.cssglobe.com/">Css Globe</a></p>
	
	
</body></html>